<template>
  <div class="header-widget">
    <div class="header-inner">
      <div class="inner-widget">
        <div class="menu-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-ms" viewBox="0 0 512 512" role="img">undefined<rect width="352" height="32" x="80" y="96" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="352" height="32" x="80" y="240" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="352" height="32" x="80" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect></svg>
        </div>
        <div class="logo" @click="$store.commit('toggleSidebar')">
          <img src="../assets/images/home/logo.png" alt="">
        </div>
        <div class="space"></div>
        <div class="aside-right">
          <!-- <div class="right-item item-button-app">
            <CButton color="info" shape="rounded-pill" variant="outline">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-projector-fill"
                viewBox="0 0 16 16"
              >
                <path
                  d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2Zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1ZM14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z"
                />
              </svg>
              {{ i18n.t('header.btn1') }}
            </CButton>
          </div> -->
          <div class="right-item item-button-token">
            <CButton color="info" shape="rounded-pill" variant="outline">
              {{ i18n.t('header.btn2') }}
            </CButton>
          </div>
          <div class="right-item">
            <CButton class="info-btn" color="info" shape="rounded-pill">
              {{ i18n.t('header.btn3') }}
            </CButton>
          </div>

          <div class="right-item item-button-lang common-dropdown-list">
            <CDropdown class="v-popover">
              <CDropdownToggle class="trigger" >
                {{ i18n.t('header.title') }}
              </CDropdownToggle>
              <CDropdownMenu>
                <CDropdownItem
                  @click="changeLanguage({ id: 'jp', name: '日本語' })"
                  >日本語</CDropdownItem
                >
                <CDropdownItem
                  @click="changeLanguage({ id: 'cntw', name: '繁体中文' })"
                  >繁体中文</CDropdownItem
                >
                <CDropdownItem
                  @click="changeLanguage({ id: 'en', name: 'English' })"
                  >English</CDropdownItem
                >
              </CDropdownMenu>
            </CDropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  CButton,
  CDropdown,
  CDropdownToggle,
  CDropdownMenu,
  CDropdownItem,
} from '@coreui/vue'
import { useI18n } from 'vue-i18n'
export default {
  name: 'Header',
  components: {
    CButton,
    CDropdown,
    CDropdownToggle,
    CDropdownItem,
    CDropdownMenu,
  },
  props: {
    routeName: {
      type: String,
      default: '',
    },
    collapsed: {
      type: Boolean,
      default: false,
    },
  },
  // eslint-disable-next-line no-unused-vars
  setup(props) {
    const sel = '日本语';
    const i18n = useI18n()
    return {
      sel,
      i18n,
    }
  },
  methods: {
    changeLanguage(item) {
      this.sel = item.name;
      this.i18n.locale.value = item.id;
      console.log(this.sel)
    },
  },
}
</script>

<style scoped lang="scss">
.header-widget {
  position: relative;
  z-index: 6;
  .header-inner {
    width: 100%;
    height: 4rem;
    margin: auto;
    background: #fff;
    -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 6%);
    box-shadow: 0 3px 9px rgb(0 0 0 / 6%);
    .inner-widget {
      line-height:4.5rem; 
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -webkit-align-items: end;
      -ms-flex-align: end;
      align-items: end;
      -webkit-box-pack: end;
      -webkit-justify-content: end;
      -ms-flex-pack: end;
      justify-content: end;
      padding: 0 .5rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .logo {
        padding: 0 .5rem;
        margin-right: 1rem;
        width: 8rem;
        img{
          width: 100%;
        }
      }
      .aside-right {
        margin-left: 1rem;
        display: flex;
        -webkit-box-align: end;
        align-items: end;
        font-size: 1rem;
      }
    }
    .right-item {
      text-align: right;
      // margin-right: 0.625rem;
      .info-btn {
        min-width: 7rem;
        font-size: 0.8rem;
        border: none;
        color: #fff;
        background-image: linear-gradient(to right, #6496e6, #a1ddf5);
      }
    }
    .item-button-token {
      display: none;
    }
    .item-button-app {
      display: none;
    }
  }
  @media (min-width: 676px) {
    .header-inner {
      width: 100%;
      height: 5.9375rem;
      position: fixed;
      top: 0;
      left: 0;
      background: #fff;
      -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 6%);
      box-shadow: 0 3px 9px rgb(0 0 0 / 6%);
      .inner-widget {
        .menu-icon{
          display: none;
        }
        .logo {
          display: none;
        }
        .aside-right {
          display: flex;
          -webkit-box-align: end;
          align-items: end;
          font-size: 1rem;
        }
        .item-button-token {
          display: inline;
        }
        .item-button-app {
          display: inline;
        }
        .right-item {
          margin-right: 0.625rem;
          .info-btn {
            width: none;
            font-size: 1rem;
          }
        }
      }
    }
  }
}
</style>
